<script setup lang="ts">
import {useRouter} from 'vue-router'
import {ref, watch} from 'vue'
import VerificationCode from "@/components/login/VerificationCode.vue";

const router = useRouter()

const onClickLeft = () => {
  router.push('/login')
}

const step = ref(0); // 步骤条步骤
const email = ref('') // 发送验证码的邮箱
const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 邮箱正则
const code = ref('') // 邮箱验证码
const codeErrorInfo = ref('')
const password = ref('') // 新密码
const confirmPassword = ref('') // 确认密码

const sendCode = () => {
  console.log(email.value)
  // 执行发送验证码
  step.value = 1
}

const validatorPasswordMessage = () => password.value !== confirmPassword.value ? '两次密码不一致' : ''

const setPassword = () => {
  console.log(password.value)
  step.value = 0
  router.push('/login')
}

watch(code, (newVal) => {
  if (newVal.length == 6 && newVal !== '123456') {
    codeErrorInfo.value = '验证码错误'
  } else if (newVal === '123456') {
    step.value = 2
  } else {
    codeErrorInfo.value = ''
  }
})

</script>

<template>
  <div class="container">
    <van-nav-bar title="找回密码" left-text="返回登录" left-arrow @click-left="onClickLeft"/>
    <van-steps :active="step">
      <van-step>输入邮箱</van-step>
      <van-step>获取验证码</van-step>
      <van-step>设置密码</van-step>
    </van-steps>

    <div class="step-container" v-if="step === 0">
      <h1 class="title">请输入邮箱</h1>
      <van-form @submit="sendCode">
        <VanField
            v-model="email"
            label="邮箱"
            placeholder="请输入邮箱"
            :rules="[{ required: true, message: '请填写邮箱地址' },{pattern, message: '邮箱格式不正确'}]"
            size="large"/>

        <VanButton type="primary" size="large" native-type="submit" style="margin-top: 20px;">发送验证码</VanButton>
      </van-form>
    </div>

    <div class="step-container" v-if="step === 1">
      <VerificationCode v-model="code" :email="email" :error-info="codeErrorInfo"/>
    </div>

    <div class="step-container" v-if="step === 2">
      <h1 class="title">设置新密码</h1>
      <van-form @submit="setPassword">
        <VanSpace direction="vertical" style="width: 100%;" size="1rem">
          <VanField
              v-model="password"
              label="密码"
              placeholder="请输入密码"
              type="password"
              :rules="[{ required: true, message: '请填写密码' }]"
              size="large"/>

          <VanField
              v-model="confirmPassword"
              label="确认密码"
              placeholder="请再次输入密码"
              type="password"
              :rules="[{ required: true, message: '请填写确认密码',validator: validatorPasswordMessage }]"
              size="large"/>

          <VanButton type="primary" size="large" native-type="submit">确认</VanButton>
        </VanSpace>
      </van-form>
    </div>

  </div>
</template>

<style scoped lang="less">
.container {
  background-color: var(--jvyou-school-background-color);
  width: 100vw;
  min-height: 100vh;
}

.step-container {
  width: 100vw;
  padding: 0 6vw;
  margin-top: 4vh;
}

.title {
  font-weight: bold;
  font-size: 1.6em;
  margin-bottom: 20px;
}

.code-tip {
  font-size: 1em;
  color: #999;
}
</style>
